<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css</title>
		<style type="text/css">
			/* 正三角形 */
			.triangle {
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 25px 40px 25px;
				border-color: transparent transparent rgb(245, 129, 127) transparent;
			}

			/* 虚线效果 */
			.dotted-line {
				border: 1px dashed transparent;
				background-color: red;
				background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc .25em, white);
			}

			/* 超出省略号 */
			.single-ellipsis {
				width: 180px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.parent {
				text-align: center;
			}

			.child {
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<!-- 记录各种有意思的css实现 -->
		<div class="triangle">

		</div>
		<div class="dotted-line">
			我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢,
			是一个美女呀我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,
			<p>我的女孩</p>
			<p>我的女孩</p>
			<p>我的女孩</p>
		</div>
		<div class="single-ellipsis">
			我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢元江的人,我是一个喜欢,
		</div>
		<div class="parent">
			<div class="child">
				demo1
			</div>
			<div class="child">
				demo2
			</div>
			<div class="child">
				demo3
			</div>
		</div>
	</body>
</html>

<!-- 
 1998
 2021 23
 30
 25
 
 -->
